<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
            <div class="title"  @click="hrefLogin">
              <img src="../assets/logo.png" style="    position: absolute; width: 0.6rem; height: 0.6rem; left: 1.2rem;top: 0.25rem;"></img>
              <span class="title-text" style="    margin-left: 0.2rem;color: white">智慧原水管理系统</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 40%" @click="cancelLoading">
            <div
              class="react-right ml-4"
              style="width: 6.25rem; text-align: left;background-color: #1370fb;"
            >
              <span class="react-before"></span>
              <button class="text" style="font-size: 0.2rem;
                padding: 0.03rem;
                background-color: rgb(92 217 232);
                border-radius: 5px;
                cursor:pointer;
                color: black;" >  切换⇌   </button>
            </div>
            <div class="react-right ml-3" style="background-color: #1370fb;">
            </div>
          </div>
          <div class="d-flex" style="width: 40%;justify-content: end" >
            <div class="react-left mr-3"  style="background-color: #1370fb;">
            </div>
            <div
              class="react-left mr-4"
              style="width: 6.25rem; background-color: #1370fb; text-align: right;"
            >
              <span class="react-after"></span>
              <span class="text">{{time}}</span>
            </div>
          </div>
        </div>

        <div class="body-box" v-show="flag">
          <!-- 第三行数据 -->
          <div class="content-box"  style="z-index: 100;">
            <div >
              <dv-border-box-12>
                <div style="width:22vw ; margin-right: 0.5vw ">
                <sheBei/>
                </div>

              </dv-border-box-12>
            </div>

            <dv-border-box-12>
              <div style="display: flex;flex-direction: row ;  margin-right: 0.5vw">

                <div style="flex:3;width:33vw">
                  <shuiLiang/>
                </div>

                <div style="flex:2;width:20vw">
                  <gongGao/>
                </div>
              </div>

            </dv-border-box-12>
            <div>
                <dv-border-box-12>
                  <div style="width:21vw ; margin-right:0.5vw">
                  <liuLiang/>
                    </div>
                </dv-border-box-12>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-12 style="z-index: 100;">
              <shuiZhi/>
            </dv-border-box-12>
           <div>
               <pzhMap/>
            </div> 
            <dv-border-box-13 style="z-index: 100;">
              <yaLi/>
            </dv-border-box-13>
          </div>
        </div> 
        
        
        <div class="body-box" v-show="!flag">
          <!-- 第三行数据 -->
          <div class="content-box2">
            <div>
              <dv-border-box-12>
                <xunJian/>
              </dv-border-box-12>
            </div>
             <div>
              <dv-border-box-13>
                <gongQuShui/>
              </dv-border-box-13>
            </div>
            <div>
              <dv-border-box-12>
                <guZhang/>
              </dv-border-box-12>
            </div>
          </div>
          <!-- 第四行数据 -->
          <div class="bototm-box2">
            <dv-border-box-12>
                <xieLou/>
            </dv-border-box-12>
            <dv-border-box-13>
              <weiYi/>
            </dv-border-box-13>
          </div>
        </div>
     
     
     
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import xunJian from "./xunJian";
import shuiLiang from "./shuiLiang";
import gongGao from "./gongGao";
import liuLiang from "./liuLiang";
import shuiZhi from "./shuiZhi";
import pzhMap from "./map";
import yaLi from "./yaLi";
import sheBei from "./sheBei";
import gongQuShui from "./gongQuShui";
import guZhang from "./guZhang";
import xieLou from "./xieLou";
import weiYi from "./weiYi";
export default {
    components: {
      xunJian,
      shuiLiang,
      gongGao,
      liuLiang,
      shuiZhi,
      pzhMap,
      yaLi,
      sheBei,
      gongQuShui,
      guZhang,
      xieLou,
      weiYi
    },
  data() {
    return {
      loading: true,
      flag:false,
      time:'',
      weeks:['日','一','二','三','四','五','六'],
    };
  },
  mounted() {
    this.cancelLoading();
    this.setTime();

    setInterval(()=>{
        this.setTime()
    },2000)
  },
  created() {
    const pzhAuthorization = localStorage.getItem('pzhAuthorization')
    if (pzhAuthorization) {
      this.checkK(pzhAuthorization);
    }else {
      window.location.href = './guns/login'
    }
    // eslint-disable-next-line no-undef
  },
  methods: {
    cancelLoading() {
        this.flag=!this.flag
        this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    async checkK(tk){
      fetch("./panzhihua/jsp/SysOpera/getTKExpired.do?pzhAuthorization=" + tk)
      // fetch("125.66.234.97:8989/panzhihua/jsp/SysOpera/getTKExpired.do?pzhAuthorization=" + tk)
          .then(response => {

            if (response.ok) { // 注意这里使用了 ok 属性来检查状态码是否在 200-299 范围内
              return response.json();
            } else {
              window.location.href = './guns/login'
            }
          })
          .then(dat => {
            console.log(dat);
            if (!dat.resCode || !dat.resCode === 'success') {
              this.cancelLoading();
              window.location.href = './guns/login'
            }
          })
          .catch(error => {
            // 处理错误情况
            window.location.href = './guns/login'
          });
    },
    hrefLogin() {
      setTimeout(() => {
        var b =true;
        const pzhAuthorization = localStorage.getItem('pzhAuthorization')
        try {
          if (!pzhAuthorization) {
            window.location.href = './guns/login'
          }
        }catch (w){}
        if (b) {
          window.location.href = './guns/login'
        }
      }, 500);
    },
    setTime(){
       let now=new Date(),
       month=now.getMonth()+1,
       date=now.getDate(),
       hours=now.getHours(),
       minutes=now.getMinutes();
       this.time=now.getFullYear()+'年'+(month<10?('0'+month):month)
       +'月'+(date<9?('0'+date):date)+'日 周'+this.weeks[now.getDay()]+' '+(hours<9?('0'+hours):hours)+':'+(minutes<9?('0'+minutes):minutes)
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/index.scss";
</style>